<template>
  <div class="mod-config" ref="main">
    <el-collapse>
      <el-collapse-item>
        <template slot="title">
          <span class="span_title">项目基本信息</span>
        </template>
        <div style="background-color: #f0f0f0">
          <div><strong>项目名称：</strong>{{projectInfo.projectName}}</div>
          <div><strong>项目类型：</strong>{{projectInfo.projectType}}</div>
          <div><strong>委托单位：</strong>{{projectInfo.projectAuthorize}}</div>
          <div><strong>委托要求：</strong>{{projectInfo.projectNote}}</div>
          <div><strong>生产负责人：</strong>{{projectInfo.projectProduce}}</div>
          <div><strong>业务负责人：</strong>{{projectInfo.projectBusiness}}</div>
          <div><strong>项目负责人：</strong>{{projectInfo.projectCharge}}</div>
          <div><strong>工作内容：</strong>{{projectInfo.workNote}}</div>
          <div><strong>工作要求：</strong>{{projectInfo.workRequire}}</div>
          <div><strong>工作小结：</strong>{{projectInfo.briefSummary}}</div>
          <div style="display:flex;padding-bottom: 4px;"><strong>项目清单：</strong>
            <el-table :data="projectInfo.projectBillList" border >
              <el-table-column prop="billName" header-align="center" align="center" label="项目" ></el-table-column>
              <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
              <el-table-column prop="num" header-align="center" align="center" label="数量" ></el-table-column>
              <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-card style="margin-top: 20px;">
      <div slot="header" class="clearfix" >
        <div class="ach_title">
          <span class="span_title">进度信息</span>
        </div>
      </div>
      <!-- 步骤信息-->
      <div class="step_card">
        <div class="content">
          <el-steps :active="step" finish-status="success">
            <el-step title="提交成果" >
              <template slot="description">
                <div class="lend_row" v-if="step > 0">
                  <div class="lend_line"><strong>提交者：</strong><span>{{processInfo.submitUser}}</span></div>
                  <div class="lend_line"><strong>提交时间：</strong><span>{{processInfo.submitTime}}</span></div>
                </div>
              </template>
            </el-step>
            <el-step title="确认成果">
              <template slot="description">
                <div class="lend_row" v-if="step > 1">
                  <div class="lend_line"><strong>确定者：</strong><span>{{processInfo.confirmName}}</span></div>
                  <div class="lend_line"><strong>确定时间：</strong><span>{{processInfo.confirmTime}}</span></div>
                </div>
              </template>
            </el-step>
            <el-step title="客户签收">
              <template slot="description">
                <div class="lend_row" v-if="step > 2">
                  <div class="lend_line"><strong>来源：</strong><span>{{processInfo.signOrigin}}</span></div>
                  <div class="lend_line"><strong>时间：</strong><span>{{processInfo.signTime}}</span></div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;">
      <el-tabs v-model="activeName" type="card">
        <!--成果编辑-->
        <el-tab-pane label="编辑成果" name="first" :disabled="step < 0 || !isAuth('project:expach:save')">
          <el-button icon="el-icon-plus" type="primary" @click="addAchHandler(null)">添加成果交接单</el-button>
          <div style="margin-top: 10px;">
            <div><strong>项目名称：</strong>{{projectInfo.projectName}}</div>
            <div><strong>项目编号：</strong>{{projectInfo.projectNo}}</div>
            <div><strong>成果交接单：</strong></div>
            <div v-if="achVoList.length == 0" style="color: grey">-- 暂无交接单 --</div>
            <div v-for="achVoItem in achVoList" class="bill_card">
              <div class="top_line">
                <div style="height: 20px;font-size: 12pt;margin-top: 10px;">
                  <strong style="bottom: 0">编号:</strong><span>{{achVoItem.billCode}}</span>
                </div>
                <div>
                  <el-button type="primary" icon="el-icon-edit" size="small" @click="addAchHandler(achVoItem.billCode)">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteBillHandle(achVoItem.billCode)">删除</el-button>
                </div>
              </div>
              <el-table :data="achVoItem.achList" border :header-cell-style="tableHeaderColor" >
                <el-table-column prop="seqNum" header-align="center" align="center" label="序号" width="80"></el-table-column>
                <el-table-column prop="billName" header-align="center" align="center" label="成果名称"></el-table-column>
                <el-table-column prop="billNo" header-align="center" align="center" label="成果编号" width="140"></el-table-column>
                <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
                <el-table-column prop="style" header-align="center" align="center" label="样式" ></el-table-column>
                <el-table-column prop="num" header-align="center" align="center" label="数量" width="100"></el-table-column>
                <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
              </el-table>
              <div class="footer_line">
                <div><span>提交者：</span><strong>{{achVoItem.createUsername}}</strong></div>
                <div><span>提交时间：</span><strong>{{achVoItem.createTime}}</strong></div>
              </div>
            </div>
            <div style="margin-top: 10px;">
              <strong>成果提交情况：</strong>
              <el-tag type="primary" size="small" v-if="sitEntity.isSach">已提交</el-tag>
              <el-tag type="info" size="small" v-else>未提交</el-tag>
            </div>
            <div class="bottom_btn">
              <el-button type="warning" size="large"  @click="goBack">返回</el-button>
              <el-button type="primary" size="large"  @click="openSubmitHandle">提交</el-button>
            </div>
          </div>
        </el-tab-pane>
        <!--确认成果-->
        <el-tab-pane label="确认成果" name="second" :disabled="step < 1 || !isAuth('project:authach:save')">
          <div>
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
              <el-form-item label="项目名称：" prop="projectNickname">
                <el-input v-model="dataForm.projectNickname"></el-input>
              </el-form-item>
              <el-form-item label="客户公司名称：" prop="clientName">
                <el-input v-model="dataForm.clientName"></el-input>
              </el-form-item>
              <el-form-item label="成果清单：">
                <el-table border :data="dataForm.achList" :header-cell-style="{background: 'dodgerblue',color: '#fff'}" >
                  <el-table-column prop="seqNum" header-align="center" align="center" label="序号" width="80"></el-table-column>
                  <el-table-column prop="billName" header-align="center" align="center" label="成果名称"></el-table-column>
                  <el-table-column prop="billNo" header-align="center" align="center" label="成果编号" width="140"></el-table-column>
                  <el-table-column prop="spec" header-align="center" align="center" label="规格" width="180"></el-table-column>
                  <el-table-column prop="style" header-align="center" align="center" label="样式" width="150"></el-table-column>
                  <el-table-column prop="num" header-align="center" align="center" label="数量(份)" width="100"></el-table-column>
                  <el-table-column prop="remark" header-align="center" align="center" label="备注" width="100"></el-table-column>
                  <el-table-column  header-align="center" align="center" label="操作" width="80">
                    <template slot-scope="scope">
                      <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item label="清单确认情况：">
                <el-tag type="primary" size="small" v-if="sitEntity.isAach">已确认</el-tag>
                <el-tag type="info" size="small" v-else>未确认</el-tag>
              </el-form-item>
            </el-form>
          </div>
          <div class="bottom_btn">
            <el-button type="warning" size="large" icon="el-icon-back" @click="goBack">返回</el-button>
            <el-button type="primary" size="large" icon="el-icon-s-order" @click="dataFormSubmit">确认成果</el-button>
            <el-button type="success" size="large" icon="el-icon-printer" @click="exportWordHandle"
                       :loading="exportLoading" :disabled="sitEntity.isAach !== 1">导出</el-button>
          </div>
        </el-tab-pane>
        <!--客户签收-->
        <el-tab-pane label="客户签收" name="third" :disabled="step < 2">
          <div style="background-color: #f0f0f0;padding: 4px;">
            <div><strong>客户公司名称：</strong>{{achInfo.clientName}}</div>
            <div><strong>客户联系电话：</strong>{{achInfo.clientPhone}}</div>
            <div class="sig_line">
              <div><strong>客户单位签字：</strong></div>
              <el-image v-if="!stringIsNull(achInfo.signature)" class="img_cap" :src="'data:image/png;base64,' + achInfo.signature"></el-image>
            </div>
            <div style="display:flex;padding-bottom: 4px;">
              <strong>满意度调查表：</strong>
              <table border="1" cellspacing="0" cellpadding="0" class="sig_table">
                <tr><th colspan="4">1、测绘项目成果质量：</th></tr>
                <tr>
                  <td v-for="item in surveyItems">
                    <span v-if="item.value === achInfo.gradeQuality" class="redspan">☑{{item.name}}</span>
                    <span v-else>{{item.name}}</span>
                  </td>
                </tr>
                <tr><th colspan="4">2、测绘项目成果满足要求程度：</th></tr>
                <tr>
                  <td v-for="item in surveyItems">
                    <span v-if="item.value === achInfo.gradeRequire" class="redspan">☑{{item.name}}</span>
                    <span v-else>{{item.name}}</span>
                  </td>
                </tr>
                <tr><th colspan="4">3、工作中工作人员协调交流和工作态度：</th></tr>
                <tr>
                  <td v-for="item in surveyItems">
                    <span v-if="item.value === achInfo.gradeAttitude" class="redspan">☑{{item.name}}</span>
                    <span v-else>{{item.name}}</span>
                  </td>
                </tr>
                <tr><th colspan="4">4、测绘工期进度情况：</th></tr>
                <tr>
                  <td v-for="item in surveyItems">
                    <span v-if="item.value === achInfo.gradeProgress" class="redspan">☑{{item.name}}</span>
                    <span v-else>{{item.name}}</span>
                  </td>
                </tr>
                <tr><th colspan="4">5、测绘人员的技术熟练程度：</th></tr>
                <tr>
                  <td v-for="item in surveyItems">
                    <span v-if="item.value === achInfo.gradeProficiency" class="redspan">☑{{item.name}}</span>
                    <span v-else>{{item.name}}</span>
                  </td>
                </tr>
              </table>
            </div>
            <div><strong>客户建议：</strong>{{achInfo.clientAdvice}}</div>
            <div><strong>填写来源：</strong>{{achInfo.origin}}</div>
            <div><strong>上传附件：</strong><a class="a_href" @click="openAchFileUrl(downUrl + achInfo.filename)">{{achInfo.filename}}</a></div>
            <div>
              <strong>客户签收情况：</strong>
              <el-tag v-if="sitEntity.isSign" type="primary">已签收</el-tag><el-tag v-else type="info">未签收</el-tag>
            </div>
          </div>
          <div class="bottom_btn">
            <el-button type="warning" size="large" icon="el-icon-back" @click="goBack">返回</el-button>
            <el-button type="primary" size="large" icon="el-icon-s-order" @click="editClientHandle">编辑客户反馈</el-button>
            <el-button type="success" size="large" icon="el-icon-printer" @click="exportResWordHandle" :loading="exportLoading">导出</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 成果提交 弹出窗口 -->
    <el-dialog title="提交成果" :visible.sync="achDialogVisible">
      <ul style="line-height: 200%;font-size: 12pt">
        <li><strong>■ </strong> 是否提交成果？</li>
        <li>
          <strong>■ </strong>
          <el-checkbox v-model="isSmsSend">并发送短信至成果管理员</el-checkbox>
          <el-select size="mini" :disabled="!isSmsSend" v-model="achUserId">
            <el-option v-for="item in achUserList" :label="item.username" :key="item.userId" :value="item.userId"  ></el-option>
          </el-select>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
      <el-button @click="achDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitAchHandle()">确定</el-button>
    </span>
    </el-dialog>
    <!-- 成果交接单 弹出窗口 -->
    <expach-add-or-update ref="expachAddOrUpdate" @refreshDataList="init" v-if="editAchVisible"></expach-add-or-update>
    <!-- 弹窗, 新增 / 修改  编辑客户签收单-->
    <authach-add-or-update ref="authachAddOrUpdate" @refreshDataList="init" v-if="editCustomVisible" ></authach-add-or-update>
  </div>
</template>

<script>
import expachAddOrUpdate from './editexpach-add-or-update'
import authachAddOrUpdate from './editauthach-add-or-update'
import innerFile from '../file/innerFile'
import archFile from '../file/archFile'
import {closeTab} from '@/utils/tabs'
import {isAuth, stringIsNull} from '@/utils'
export default {
  data () {
    return {
      dataForm: {
        projectNo: '',
        projectNickname: '',
        confirmName: '',
        confirmTime: '',
        clientName: '',
        achList: []
      },
      // 流程信息
      processInfo: {
        submitUser: '', // 提交
        submitTime: '',
        confirmName: '',  // 确认
        confirmTime: '',
        signOrigin: '', // 签收
        signTime: ''
      },
      sitEntity: {},
      dataRule: {
        projectNo: [
          { required: true, message: '项目编号不能为空', trigger: 'blur' }
        ],
        projectNickname: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        clientName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
      },
      surveyItems: [
        {value: 20, name: '非常满意'},
        {value: 18, name: '满意'},
        {value: 14, name: '基本满意'},
        {value: 10, name: '不满意'}
      ],
      downUrl: window.SITE_CONFIG['uploadUrl'] + 'res/',
      achInfo: '',
      getArgsPageIndex: this.$route.query.pageIndex,
      getArgsPageSize: this.$route.query.pageSize,
      proLoading: false,
      dataLoading: false,
      exportLoading: false,  // 导出
      projectNo: '',
      reportTitle: '',
      projectInfo: '',
      editAchVisible: false,
      editCustomVisible: false,
      achDialogVisible: false,
      step: 0, // 进度步骤
      activeName: '',
      achVoList: [],
      achUserList: [],
      achUserId: 6,
      isSmsSend: true,
    }
  },
  components: {
    expachAddOrUpdate,
    authachAddOrUpdate,
    innerFile,
    archFile
  },
  computed: {
    argsPageIndex: {
      get () { return this.$store.state.paramsutil.argsPageIndex },
      set (val) { this.$store.commit('paramsutil/updateargsPageIndex', val) }
    },
    argsPageSize: {
      get () { return this.$store.state.paramsutil.argsPageSize },
      set (val) { this.$store.commit('paramsutil/updateargsPageSize', val) }
    }
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.projectNo = this.$route.query.projectNo
      this.getAchVoListByProNo(this.projectNo).then(voList => {
        this.achVoList = voList
      })
      this.getInfoByProjectNo(this.projectNo).then( info => {
        this.projectInfo = info
        this.getAuthach().then(data => {
          this.sitEntity = data.sitEntity
          this.stepInit()
          if (stringIsNull(data.projectAuthach)) {
            this.dataForm.projectNickname = info.projectName
            this.dataForm.clientName = info.projectAuthorize
          } else {
            this.dataForm.projectNickname = data.projectAuthach.projectNickname
            this.dataForm.clientName = data.projectAuthach.clientName
            this.processInfo.confirmName = data.projectAuthach.confirmName
            this.processInfo.confirmTime = data.projectAuthach.confirmTime
            this.processInfo.signOrigin = data.projectAuthach.origin
            this.processInfo.signTime = data.projectAuthach.createTime
            this.achInfo = data.projectAuthach
            this.isSign = data.isSign
          }
        })
      })
      // 获取成果列表
      this.getLastExpachList().then(voList => {
        this.dataForm.achList = voList
        if (voList.length > 0) {
          this.processInfo.submitUser = voList[voList.length - 1].createUsername
          this.processInfo.submitTime = voList[voList.length - 1].createTime
        }
      })
      this.getAchUserListHandle()
    },
    // 步骤初始化
    stepInit () {
      this.activeName = isAuth('project:expach:save') ? 'first' : ''
      if (this.sitEntity.isSach === 1) {
        this.step = 1
        this.activeName = isAuth('project:authach:save') ? 'second' : ''
      }
      if (this.sitEntity.isAach === 1) {
        this.step = 2
      }
      if (this.sitEntity.isSign === 1) {
        this.step = 3
      }
    },
    // 获取项目基本信息
    getInfoByProjectNo (projectNo) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/projectInfo/info/${projectNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.projectInfo)
          } else {
            this.$message.error(data.msg)
            reject(data.msg)
          }
        })
      })
    },
    // 获取确认清单
    getAuthach () {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/authach/info/${this.projectNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 获取最后一次成果清单
    getLastExpachList () {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/expach/lastList`),
          method: 'get',
          params: this.$http.adornParams({
            projectNo: this.projectNo
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.list)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 获取成果列表
    getAchVoListByProNo (projectNo) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/expach/volist`),
          method: 'get',
          params: this.$http.adornParams({
            projectNo: projectNo
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.volist)
          } else {
            this.$message.error(data.msg)
            reject(data.msg)
          }
        })
      })
    },
    // 编辑 \ 添加成果交接单 事件
    addAchHandler (billCode) {
      this.editAchVisible = true
      this.$nextTick(() => {
        let item = {
          projectNo: this.projectNo,
          projectName: this.projectInfo.projectName,
          billCode: billCode,
          billList: this.projectInfo.projectBillList
        }
        this.$refs.expachAddOrUpdate.init(item)
      })
    },
    // 删除成果单
    deleteBillHandle (billCode) {
      this.$confirm('确定对编号[' + billCode + ']成果交接单 进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/project/expach/delete'),
          method: 'post',
          data: this.$http.adornData({
            projectNo: this.projectNo,
            billCode: billCode
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.init()
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 确认成果
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let authach = {
            projectNo: this.projectNo,
            projectNickname: this.dataForm.projectNickname,
            clientName: this.dataForm.clientName
          }
          this.$http({
            url: this.$http.adornUrl('/project/authach/save'),
            method: 'post',
            data: this.$http.adornData({
              authachEntity: authach
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.init()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 导出Word接口
    exportWordHandle () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.exportLoading = true
          // 打钩的清单才要导出
          let formData = {
            authachEntity: {
              projectNo: this.projectNo,
              projectNickname: this.dataForm.projectNickname,
              clientName: this.dataForm.clientName
            },
            achList: this.dataForm.achList
          }
          this.$http({
            url: this.$http.adornUrl('/project/authach/exportWord'),
            method: 'post',
            data: this.$http.adornData(formData),
            withCredentials: false, // 允许携带cookie
            responseType: 'blob'
          }).then(({data}) => {
            console.log(data)
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(data) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = this.dataForm.projectNickname + '.doc' // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放掉blob对象
            this.exportLoading = false
          })
        }
      })
    },
    // 导出
    exportResWordHandle () {
      this.exportLoading = true
      this.$http({
        url: this.$http.adornUrl('/project/authach/exportResWord'),
        method: 'get',
        params: this.$http.adornParams({
          projectNo: this.projectNo
        }),
        withCredentials: false, // 允许携带cookie
        responseType: 'blob'
      }).then(({data}) => {
        console.log(data)
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(data) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = this.dataForm.projectNickname + '（最终）.doc' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.exportLoading = false
      })
    },
    // 编辑客户
    editClientHandle () {
      this.editCustomVisible = true
      this.$nextTick(() => {
        this.$refs.authachAddOrUpdate.init(this.projectNo)
      })
    },
    // 打开提交成果窗口
    openSubmitHandle () {
      if (this.achVoList.length < 1) {
        this.$message.error('交接单不能为空！')
        return
      }
      this.achDialogVisible = true
    },
    // 保存成果（设置提交状态）
    submitAchHandle () {
      this.achDialogVisible = false
      this.$http({
        url: this.$http.adornUrl('/project/expach/postAch'),
        method: 'post',
        data: this.$http.adornData({
          projectNo: this.projectNo,
          projectName: this.projectInfo.projectName,
          isSmsSend: this.isSmsSend,
          achUserId: this.achUserId
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '提交成功',
            type: 'success',
            duration: 1500
          })
          this.init()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取发送至成果接受者列表
    getAchUserListHandle () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/getUserList/10'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.achUserList = data.list
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 打开附件链接
    openAchFileUrl (url) {
      window.open(url)
    },
    // 返回
    goBack () {
      closeTab('project-editexpach')
      this.argsPageSize = this.getArgsPageSize
      this.argsPageIndex = this.getArgsPageIndex
      this.$router.push('project-project')
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 700;line-height:200%'
      }
    }
  },
  watch: {
    '$route': function (to, from) {
      this.projectNo = to.query['projectNo']
      // 执行数据更新查询
      if (to.name === 'project-editexpach') {
        this.init()
      } else {
        closeTab('project-editexpach')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/_variables.scss";
  .span_title {
    font-size: 18px;
    font-weight: 700;
  }
  .ach_title{
    padding: 0;
    justify-content: space-between;
    display: flex
  }

  .bill_card {
    margin-top: 20px;
    box-shadow: 6px 6px 5px #888888;
    .top_line {
      vertical-align:bottom;
      display: flex;
      justify-content: space-between;
    }
    .footer_line {
      display: flex;
      justify-content: space-between;
      padding: 5px;
    }
  }
  .bottom_btn{
    margin: 20px;
    width: 100%;
    text-align: center;
  }

  .step_card {
    width: 100%;
    .content {
      max-width: 800px;
    }
  }
  .lend_row {
    color: gray;
  }
  .sig_line {
    display:flex;
    vertical-align: top;
  }
  .sig_table {
    text-align: left;
    th {
      padding: 2px;
      font-size: 11pt;
    }
    td {
      text-align: center;
      padding: 1px;
      width: 120px;
    }
    .redspan {
      color: red;
    }
  }
  .img_cap {
    border: 1px solid $--color-primary;
    max-width: 200px;
  }
  .a_href {
    text-decoration:underline;
  }
</style>
